<template>
  <div id="center">
    <div class="centerTitle">
      <div class="asTitle">移动网</div>
    </div>
    <div class="up">
      <div class="item" v-for="item in titleItem" :key="item.title">
        <!-- 小块块上的字体设置 -->
        <p class="ml-3 h-48 colorBlue fw-b fs-xxxxl">{{ item.title }}</p>
        <div class="dv-dig-flop ml-1 mt-10 pl-3">
          {{ item.number.number[0] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import CenterChart from "@/components/echart/center/centerChartRate";
export default {
  data() {
    return {
      titleItem: [
        {
          title: "总用户数",
          number: {
            number: [120],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "月最大在网数",
          number: {
            number: [18],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "出口流量",
          number: {
            number: [2],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "5G分流比",
          number: {
            number: [14],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "5G驻留比",
          number: {
            number: [106],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
        {
          title: "基站数",
          number: {
            number: [100],
            toFixed: 1,
            textAlign: "left",
            content: "{nt}",
            style: {
              fontSize: 36,
            },
          },
        },
      ],
      ranking: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
          {
            name: "新乡2",
            value: 80,
          },
          {
            name: "新乡3",
            value: 80,
          },
          {
            name: "新乡4",
            value: 80,
          },
          {
            name: "新乡5",
            value: 80,
          },
          {
            name: "新乡6",
            value: 80,
          },
        ],
        carousel: "single",
        unit: "人",
      },
      water: {
        data: [24, 45],
        shape: "roundRect",
        formatter: "{value}%",
        waveNum: 3,
      },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: "centerRate1",
          tips: 60,
          colorData: {
            textStyle: "#3fc0fb",
            series: {
              color: ["#00bcd44a", "transparent"],
              dataColor: {
                normal: "#03a9f4",
                shadowColor: "#97e2f5",
              },
            },
          },
        },
        {
          id: "centerRate2",
          tips: 40,
          colorData: {
            textStyle: "#67e0e3",
            series: {
              color: ["#faf3a378", "transparent"],
              dataColor: {
                normal: "#ff9800",
                shadowColor: "#fcebad",
              },
            },
          },
        },
      ],
    };
  },
  components: {
    // CenterChart,
  },
};
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  height: 42vh;
  flex-direction: column;
  .centerTitle {
    flex: 1;
    padding: 0.15vh 0.25vh;
    text-align: left;
    font-size: 2vw;
    font-weight: bold;
    .asTitle {
      padding-left: 2vw;
      // 使用相对位置让问题垂直居中
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .up {
    flex: 4;
    width: 95%;
    margin: 0.3vh auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    .item {
      text-align: center;
      border-radius: 6px;
      padding-top: 0.1vh;
      margin-top: 0.1vh;
      width: 33%;
      // height: 20vh;
      .dv-dig-flop {
        // width: 9rem;
        // height: 6rem;
        font-size: 2vw;
      }
    }
  }
}
</style>
